<template>
  <div class="orderInfo">
    <h1>核对订单信息</h1>
    <div class="addressInfo">
      <div class="top">
        <h5>选择收货地址</h5>
      </div>
      <ul class="content">
        <li v-for="item in addressList" :key="item.createdAt">
          <h5>{{item.name}}（收）</h5>
          <p>手机号码：{{item.phone}}</p>
          <p>详细地址：{{item.area_name}} {{item.desc}}</p>
          <div class="buts">
            <button class="left" @click="setDefault(item.id)">设为默认地址</button>
            <!-- <button @click="editAddress(item.id)">编辑</button> -->
            <el-button type="text" @click="editAddress(item.id)">编辑</el-button>
            <!-- 点击编辑时出现的信息 -->
            <el-dialog title="收货人信息" :visible.sync="dialogVisible" width="30%">

              <el-form ref="address_a" :model="address_a" label-width="auto">
                <el-form-item label="收货人姓名">
                  <el-input v-model="address_a.name"></el-input>
                </el-form-item>
                <el-form-item label="手机号码">
                  <el-input v-model="address_a.phone"></el-input>
                </el-form-item>
                <el-form-item label="邮政编码">
                  <el-input v-model="address_a.post_code"></el-input>
                </el-form-item>
                <el-form-item label="收货地址">
                  <el-cascader v-model="address_a.area" :options="options">
                  </el-cascader>
                </el-form-item>
                <el-form-item label="详细地址">
                  <el-input v-model="address_a.desc"></el-input>
                </el-form-item>
              </el-form>

              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="putAddress(item.id)">确 定</el-button>
              </span>
            </el-dialog>

            <button @click="delAddress(item.id)">删除</button>
          </div>
        </li>
      </ul>
      <div class="buttom">
        <el-button class="add" type="text" @click="dialogVisible = true">+ 添加新地址</el-button>
        <el-dialog title="收货人信息" :visible.sync="dialogVisible" width="30%">

          <el-form ref="form" :model="form" label-width="auto">
            <el-form-item label="收货人姓名">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="手机号码">
              <el-input v-model="form.phoneNum"></el-input>
            </el-form-item>
            <el-form-item label="邮政编码">
              <el-input v-model="form.postal"></el-input>
            </el-form-item>
            <el-form-item label="收货地址">
              <el-cascader v-model="value" :options="options" :cityname="cityname" @change="handleChange"></el-cascader>
            </el-form-item>
            <el-form-item label="详细地址">
              <el-input v-model="form.detailAddress"></el-input>
            </el-form-item>
          </el-form>

          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addAddress">确 定</el-button>
          </span>
        </el-dialog>
      </div>

    </div>
    <div class="goodInfo">
      <div class="top">
        <span>商品属性</span>
        <span>单价</span>
        <span>数量</span>
        <span>小计</span>
      </div>
      <ul class="center">
        <li v-for="good in orderGoods" :key="good.id">
          <div class="photo">
            <img :src="good.s_good.s_goods_photos[0].path" alt="">
          </div>
          <div class="name">
            {{good.s_good.name}}
          </div>
          <div class="price">
            ￥ <span>{{good.s_good.price}}</span>
          </div>
          <div class="number">
            <input type="text" v-model="good.num">
          </div>
          <div class="subtotal">
            ￥ <span>{{good.num*good.s_good.price}}</span>
          </div>
        </li>
      </ul>
      <div class="buttom">
        <p>实付款：<span>￥</span><span>{{goodsPic}}</span> </p>
        <p>寄送至：<span>{{defaultInfo.area_name}} - {{defaultInfo.desc}}</span> </p>
        <p>收货人：<span>{{defaultInfo.name}} {{defaultInfo.phone}}</span></p>
        <div class="buts">
          <button @click="goCart">返回购物车</button>
          <button>提交订单</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getCity, postAdress, getAddress, delAddress, putAddress, postDefault, getDefault } from "@/assets/request.js"
export default {
  name: "order",
  data() {
    return {
      // 接收从购物车传过来的商品
      orderGoods: [],
      // 接收所有城市信息
      cityInfo: [],
      // 结算的总价格
      goodsPrice: "",
      // 使用组件中内容
      dialogVisible: false,
      form: {
        name: '',
        phoneNum: '',
        detailAddress: '',
        postal: '',
        area: '',
      },
      value: [],
      // 获取到的所有城市信息
      options: [],
      // 从后台获取已有的地址列表
      addressList: [],

      // 新增地址时选择的城市名称，有三个层级，分别用a,b,c先存放，最后再存在一起
      cityname: [],
      // 真正用到的城市名称，cityname转变为字符串形式
      area_name: "",

      // 设置的默认信息
      defaultInfo: '',
      // 点编辑地址的哪个地址
      address_a: "",
      // 编辑后的地址
      citynm: [],
      // aa:[]
      editarea: "",
    }
  },
  methods: {
    // 点击出现弹窗添加地址
    // 选完收货地址会进行这一步
    handleChange(value) {
      console.log(value);

      let a = this.options.find((item) => {
        return item.value == this.value[0]
      })
      let b = a.children.find((item) => {
        return item.value == this.value[1]
      })
      let c = b.children.find((item) => {
        return item.value == this.value[2]
      })
      this.cityname=[]
      this.cityname.push(a.cityname, b.cityname, c.cityname)
      console.log(this.cityname);
      // this.area_name = this.cityname.join(",")
    },

    // 点击确认添加地址
    async addAddress(id) {
      this.dialogVisible = false;
      this.area_name = this.cityname.join(",")
      // 发请求添加到后台地址信息上
      let address = await postAdress(id,
        {
          name: this.form.name,
          phone: this.form.phoneNum,
          password: '1234567',
          area: this.value.join(","),
          area_name: this.area_name,
          desc: this.form.detailAddress,
          post_code: this.form.postal,
        });
      // 重新获取地址列表渲染
      let getAdress = await getAddress()
      this.addressList = getAdress.data.result
    },

    // 点击删除地址
    async delAddress(id) {
      let deladdress = await delAddress(id)
      let getAdress = await getAddress()
      this.addressList = getAdress.data.result
    },

    // 打开编辑按钮
    async editAddress(id) {
      this.dialogVisible = true
      // console.log(id);
      // 通过find方法查找要编辑的哪个地址
      this.address_a = this.addressList.find(item => {
        return item.id == id
      })
      let aa = [];
      aa = this.address_a.area.split(",").map(item => Number(item))
      this.address_a.area = aa;
    },

    // 确定编辑，改完信息点确定时，更改信息
    async putAddress(id) {
      let a = this.options.find((item) => {
        return item.value == this.address_a.area[0]
      })
      let b = a.children.find((item) => {
        return item.value == this.address_a.area[1]
      })
      let c = b.children.find((item) => {
        return item.value == this.address_a.area[2]
      })
      this.citynm = []
      this.citynm.push(a.cityname, b.cityname, c.cityname)
      // console.log(this.citynm);

      let putaddress = await putAddress(id, {
        name: this.address_a.name,
        phone: this.address_a.phone,
        password: '1234567',
        area: this.address_a.area.join(','),
        area_name: this.citynm.join(','),
        desc: this.address_a.desc,
        post_code: this.address_a.post_code,
        status: this.address_a.status,
      })
      let getAdress = await getAddress()
      this.addressList = getAdress.data.result

      this.dialogVisible = false
    },

    // 设置默认地址
    async setDefault(id) {
      // 先设置默认地址，再获取默认地址
      let postadress = await postDefault(id)
      let getdefault = await getDefault()
      this.defaultInfo = getdefault.data.result
      console.log(this.defaultInfo);
    },

    // 去购物车页面
    goCart() {
      this.$router.push({
        name: "cart",
      })
    },

  },
  computed: {
    goodsPic() {
      return this.orderGoods.reduce((prev, item) => {
        return prev += item.num * item.s_good.price
      }, 0)
    },
  },
  async mounted() {
    // 从本地存储中接收过来信息
    let orderLists = sessionStorage.getItem("orderList")
    this.orderGoods = JSON.parse(orderLists)
    // console.log(this.orderGoods);

    // 获取城市的信息
    let citys = await getCity()
    this.options = citys.data.result
    console.log(this.options);

    // 获取地址列表
    let getAdress = await getAddress()
    this.addressList = getAdress.data.result
    console.log(this.addressList);
  },
}

</script>

<style lang='scss' scoped>
@function vw($w) {
  @return ($w/1349) * 100+vw;
}

.orderInfo {
  width: 100%;
  // background-color: rgb(226, 229, 231);

  h1 {
    text-align: center;
    font-size: vw(30);
  }

  .addressInfo {
    width: vw(1200);
    margin: 0 auto;
    padding: 0 vw(30);
    background-color: #fff;

    .top {
      h5 {
        font-size: vw(16);
      }
    }


    .content {
      width: vw(1200);
      display: flex;
      flex-wrap: wrap;

      li {
        width: vw(230);
        height: vw(100);
        border: 2px dashed rgb(179, 174, 174);
        padding: vw(9);
        margin-right: vw(40);
        margin-top: vw(20);
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        &:focus {
          border: 2px solid #000;
        }

        &:hover {
          border: 2px dashed;
          border-image: linear-gradient(to right, #c75938, #578aef) 1;
        }

        h5 {
          height: vw(40);
          font-size: vw(14);
          line-height: vw(30);
        }

        p {
          height: vw(30);
        }

        .buts {
          padding-top: vw(5);

          button {
            color: #3366CC;
            padding-right: vw(14);
            border: none;
            background-color: #fff;
            cursor: pointer;

            &:hover {
              color: #FF5000;
            }
          }

          // 由于一些div元素不接受focus伪类，可以在div上加tabindex='1'然后在设置focus
          .left:focus {
            color: #FF5000;
          }
        }
      }

    }

  }

  .goodInfo {
    width: vw(1200);
    margin: 0 auto;

    .top {
      width: 100%;
      height: vw(30);
      border-bottom: 2px solid rgb(135, 179, 230);
      display: flex;
      justify-content: space-around;
    }

    .center {
      width: 100%;
      border-bottom: 1px solid rgb(202, 197, 197);

      li {
        height: vw(100);
        text-align: center;
        background-color: rgb(238, 242, 245);
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin: vw(20) 0;
        padding: 0 vw(20);
        border-radius: vw(10);

        .photo {
          img {
            width: vw(90);
            height: vw(90);
          }
        }

        .name {
          width: vw(300);
          font-size: vw(14);
        }

        .price {
          width: vw(90);
          font-size: vw(16);
        }

        .number {

          input {
            width: vw(50);
            font-size: vw(16);
            text-align: center;
            border: none;
            background-color: rgb(238, 242, 245);
          }

        }

        .subtotal {
          width: vw(110);
          font-size: vw(18);
          color: red;
        }
      }
    }

    .buttom {
      padding: vw(20) vw(20) vw(50) 0;
      text-align: right;
      font-size: vw(13);
      font-weight: 600;

      p:nth-of-type(1) {
        margin-bottom: vw(16);

        span {
          font-size: vw(26);
        }

        span:nth-of-type(1) {
          color: #999;
        }

        span:nth-of-type(2) {
          color: #FF5000;
          font-weight: 600;
        }
      }

      p:nth-of-type(2) {
        margin-bottom: vw(6);

        span {
          font-size: vw(13);
          font-weight: 400;
        }
      }

      p:nth-of-type(3) {
        span {
          font-size: vw(13);
          font-weight: 400;
        }
      }

      .buts {
        margin-top: vw(26);

        button {
          width: vw(160);
          height: vw(36);
          border: none;
          background-color: #fff;
          cursor: pointer;
        }

        button:nth-of-type(1) {
          color: #3366CC;
          cursor: pointer;

          &:hover {
            color: #FF5000;
          }
        }

        button:nth-of-type(2) {
          color: #fff;
          font-size: vw(14);
          background-color: #FF5000;
        }
      }
    }

  }

}
</style>
